<template>
    <div class="center">
        <img alt="聚交园" class="img" src="https://img95.699pic.com/xsj/1j/dh/df.jpg%21/fh/300">
    </div>
    <div style="margin: 14px;padding-top: 20px" class="form_center">
        <van-form @submit="onSubmit" >
            <van-cell-group inset>
                <van-field
                        v-model="userAccount"
                        name="userAccount"
                        label="账号"
                        placeholder="请输入账号"
                        :rules="[{ required: true, message: '请填写账号' }]"
                />
                <van-field
                        v-model="userPassword"
                        type="password"
                        name="userPassword"
                        label="密码"
                        placeholder="请输入密码"
                        :rules="[{ required: true, message: '请填写密码' }]"
                />
            </van-cell-group>
            <div class="longin">
                <van-button  round block type="primary" native-type="submit">
                    登录
                </van-button>
            </div>
        </van-form>
    </div>
    <div class="register">
        <van-button style="width: 282.74px" round block  plain size="large" type="primary" @click="doRegister">
            注册
        </van-button>
    </div>


</template>

<script setup lang="ts">
    import {useRouter} from "vue-router"
    import {ref} from 'vue'
    import myAxois from "../plugin/MyAxios";
    import {showFailToast, showSuccessToast} from "vant";

    const router = useRouter();

    const userAccount = ref('');
    const userPassword = ref('');

    //点击登录按钮所触发的事件
    const onSubmit = async () => {
        const res = await myAxois.post('/user/login',{
            userAccount:userAccount.value,
            userPassword:userPassword.value,

        })
        if(res.data.code === 0 && res.data.data){
            showSuccessToast("登录成功!");
            router.replace("/");
        }else{
            showFailToast(res.data.msg);
        }
    }

    const doRegister = () =>{
        router.push("/user/register")
    }

</script>

<style scoped>
    .center {
        margin-top: 10px;
        display: flex;
        justify-content: center;
    }

    .img {
        box-shadow: 0 0 14px rgba(0, 0, 0, 0.5);
        border-radius: 20%;
        height: 135px;
        width: 135px;
    }

    .longin {
        margin: 16px 14px 0 12%;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    .register {
        /*margin: 16px 14px 0 12%;*/
        margin-left: 30px;
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    .form_center{
        height: 50%;

        display: flex;
        justify-content: center;
    }
</style>